<script setup lang="ts">
import { reactive, ref } from "vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { Message, PaginationProps } from "@arco-design/web-vue";
import { getUserList } from "@/services/userApi.ts";
import type { UserListType } from "@/types/UserType.ts";
import { roleAssignApi } from "@/services/roleApi.ts";

const emits = defineEmits<{
  (e: "list"): void;
}>();

const props = defineProps<{
  roleId: string;
  data: Array;
}>();

const formSearch = reactive({
  current: 1,
  size: 10,
  username: "",
});

const loading = ref(false);

const rowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
};

const selectedKeys = ref<string[]>([]);

const visible = ref(false);

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
});

const data = ref<UserListType[]>([]);

function queryData() {
  // 所有用户
  getUserList(formSearch).then((res) => {
    if (res.code === 200) {
      data.value = res.data.records;
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
    }

  });
}

const handlePageChange = (page: number) => {
  formSearch.current = page;
  queryData();
};

const handleOk = () => {
  if (selectedKeys.value.length === 0) {
    visible.value = false;
    return;
  }
  loading.value = true;

  roleAssignApi({
    roleId: props.roleId,
    userIds: selectedKeys.value,
  }).then((res) => {
    if (res.code === 200) {
      Message.success(res.data);
      visible.value = false;
      emits("list");

      // selectedKeys.value.push();
    }
  });
};

const handleCancel = () => {
  visible.value = false;
};

const init = () => {
  formSearch.username = "";
  loading.value = false;
  queryData();
  selectedKeys.value = [];
  visible.value = true;


  props.data.forEach((item) => {
    selectedKeys.value.push(item.id);
  });
};

const handleSearch = () => {
  handlePageChange(1);
  selectedKeys.value = [];
};

const handleReset = () => {
  formSearch.username = "";
  handleSearch();
};

defineExpose({
  init,
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    slotName: "index",
    width: 100,
  },
  {
    title: "用户账号",
    dataIndex: "username",
    width: 180,
    align: "center",
  },
  {
    title: "用户姓名",
    dataIndex: "realname",
    width: 180,
    align: "center",
  },
  {
    title: "状态",
    slotName: "status",
    width: 80,
    align: "center",
  },
];

function getStatusString(status: 0 | 1 | null) {
  if (status === 1) {
    return "禁用";
  }
  if (status === 0) {
    return "正常";
  }
  if (status === null) {
    return "暂无";
  }
}

const getColor = (status: 0 | 1 | null) => {
  // 根据状态返回不同的type
  switch (status) {
    case 1:
      return "#f53f3f";
    case 0:
      return "#00b42a";
  }
};
</script>

<template>
  <a-modal
    :visible="visible"
    title="用户选择列表"
    @ok="handleOk"
    @cancel="handleCancel"
    width="750px"
    :ok-loading="loading"
  >

    <a-form auto-label-width>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户账号">
            <a-input
              v-model="formSearch.username"
              allow-clear
              placeholder="请输入用户账号"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-space>
            <a-button
              type="primary"
              @click="handleSearch"
            >
              <template #icon>
                <icon-search />
              </template>
              <span>查询</span>
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <icon-refresh />
              </template>
              <span>重置</span>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <div class="userContainer">
      <a-table
        style="user-select: none;"
        :columns="columns"
        :bordered="tableBorder"
        :row-selection="rowSelection"
        v-model:selected-keys="selectedKeys"
        :pagination="pagination"
        row-key="id"
        :data="data"
        @page-change="handlePageChange"
      >

        <template #index="{record, column, rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>

        <template #status="{ record }">
          <a-tag :color="getColor(record.status)">{{ getStatusString(record.status) }}</a-tag>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
:deep(.arco-modal-body) {
  height: 200px !important;
  overflow: auto;
}

.userContainer {
  height: 480px;
  overflow: auto;
}
</style>